<!DOCTYPE html>
<title>Verify drawing video frames to canvas using media stream.</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<video></video>
<canvas width="1" height="1"></canvas>
<script>
async_test(function(t) {
    var video = document.querySelector("video");
    var canvas = document.querySelector("canvas");
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        // start preview.
        video.srcObject = stream;
        video.play();
    }, t.unreached_func);

    video.onplaying = t.step_func_done(function() {
        var width = canvas.width;
        var height = canvas.height;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, width, height);

        // paint to canvas.
        ctx.drawImage(video, 0, 0, width, height);
        var frame = ctx.getImageData(0, 0, width, height);
        assert_not_equals(frame, null);
        assert_not_equals(frame.data[0] + frame.data[1] + frame.data[2], 0);
    });
});
</script>
